<template>
  <view class="container">
    <uni-nav-bar title="自营标品盘点" fixed statusBar :border="false" height="88rpx" background-color="#fff" left-icon="left"
      @clickLeft="onClickLeft" right-text="盘点" @clickRight="onClickRight"></uni-nav-bar>
    <scroll-view class="scroll-view_H" scroll-y @refresherrefresh="refresherrefreshFn" refresher-enabled="true"
      :show-scrollbar="false" @scrolltolower="lower" :refresher-triggered="triggered" enhanced
      :style="{ height: `calc(100vh - 88rpx - ${statusBarHeight}px)` }" style="overflow: hidden;">

      <!-- 自营盘点 -->
      <view class="infoCard" v-for="(item, index) in goodsList" :key="item.id + index"
        @click="$navTo('./zyTakeStockDetail', { id: item.id })">
        <view class="left">
          <view class="tokenNum">
            <view class="count u-ellipsis goodsname" style="width: 100% !important;">盘点名称：{{ item.name }}</view>
          </view>
          <view class="tokenNum">
            <view class="count" style="width: 100% !important;">盘点种类：{{ item.count }}</view>
          </view>
          <view class="tokenNum">
            <view class="count" style="width: 100% !important;">盘点时间：{{ item.createTime | parseTime }}</view>
          </view>
        </view>
        <view class="right"><uni-icons type="right" size="30"></uni-icons></view>
      </view>
      <uni-load-more :status="loading" v-if="goodsList.length > 0"></uni-load-more>
      <view
        style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
        v-if="goodsList.length == 0">
        <image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
      </view>
    </scroll-view>
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog ref="inputClose" mode="input" title="确认" @confirm="submit" @close="close" before-close>
        <template>
          <view class="infoRemark">请确保盘点期间不再售卖商品，否则会造成盘点结果不准确。</view>
        </template>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import { reqSelfStockList } from '@/apis/goods'
export default {
  name: 'ZyTakeStock',
  data() {
    return {
      goodsList: [],
      page: {
        pageNum: 1,
        pageSize: 15
      },
      triggered: false, // 是否触发下拉刷新
      loading: 'loading', // 是否触发上拉加载
    };
  },
  onShow() {
    this.goodsList = []
    this.reqSelfStockList()
  },
  methods: {
    onClickRight() {
      this.$refs.inputDialog.open()
    },
    submit() {
      this.$refs.inputDialog.close()
      this.$navTo('./zyPdCheckGoods');
    },
    close() {
      this.$refs.inputDialog.close()
    },
    refresherrefreshFn() {
      this.page.pageNum = 1
      this.triggered = true
      this.goodsList = []
      this.loading = "loading";
      this.reqSelfStockList()
    },
    // 供应链 
    async reqSelfStockList() {
      const res = await reqSelfStockList({ ...this.page })
      if (res.code === 200) {
        this.goodsList = [...this.goodsList, ...res.data.list]
        this.nextPage = res.data.nextPage
        console.log('goodsList:', this.goodsList);
        this.triggered = false
        if (res.data.isLastPage) {
          this.loading = "noMore"
        }
      }
    },

    lower() {
      if (this.loading == "noMore") {
        console.log('no');
        return;
      }
      this.page.pageNum++;
      this.loading = "loading";
      this.reqSelfStockList()
    },

  },
}
</script>

<style>
page {
  background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.content {
  height: 100vh;
  background-color: #f7f7f7;
}

view {
  box-sizing: border-box;
}

.goodsname {
  font-weight: 600;
}

.infoCard {
  // width: 100%;
  background-color: #edf2fa;

  border-radius: 20rpx;
  margin: 20rpx;
  font-size: 26rpx;
  // margin-bottom: 10rpx;
  padding: 20rpx 10rpx;
  align-items: center;
  height: 210rpx;
  line-height: 60rpx;
  border: 1px solid #d3e3fd;
  display: flex;

  &:nth-last-child(2) {
    margin-bottom: 0;
  }

  .left {
    width: 90%;
  }

  .right {
    width: 10%;
  }

  .tokenNum {

    display: flex;
    width: 100%;
    justify-content: space-between;

    .count {
      width: 48%;
      padding-left: 20rpx;
    }
  }
}
</style>